<html>
<head>
<script src="contextfree.js"></script>
<script src="universalcanvas.js"></script>
<script>
function createCanvas(){
	var c = document.createElement( "canvas" );
	c.id = "canvas";
	c.width = "1000";
	c.height = "1000";
	
	document.getElementById("canvasHolder").appendChild( c );
}

function removeCanvas(){
	var c = document.getElementById("canvas");
	if( c ){
		document.getElementById("canvasHolder").removeChild( c );
	}
}

function render( el ){
	removeCanvas();
	createCanvas();
	
	var t = new Tokenizer();
	var tokens = t.tokenize( el.id );

	var c = new Compiler();
	var compiled = c.compile( tokens );
	
	Renderer.render( compiled, "canvas" );
}

</script>
<style>
textarea{ width: 300px; height: 200px;}
</style>
</head>

<body>
<div id="canvasHolder"></div>
<br/>

<!-- Snake -->
<textarea id="snake" ondblclick="render(this);">
startshape starter

rule starter{
 snakeparty{ s .2 }
}

rule snakeparty {
 snake { }
 snakeparty {y 1.0 s 0.95 r -15}
}

rule snakeeye {
  CIRCLE {b 1}
  CIRCLE {b -1 s 0.4 x -0.35}
}

rule snake {
 snaketail { }
 snakeeye {s 0.4 x -0.2 y 0.2}
 snakemouth {x -0.5 y -0.2 s 0.3}
}

rule snaketail {
 CIRCLE {}
 SQUARE {x 0.32 y 0.1 s 0.5 r -30}
 SQUARE {x 0.32 y -0.1 s 0.5 r 30}
 snaketail {x 0.8 s 0.7}
}

rule snakemouth {
 SQUARE {b 1 r 65}
}
</textarea>


<!-- Circle -->
<textarea id="circ" ondblclick="render(this);">
startshape circ

rule circ {
 CIRCLE{ sat .3 hue 100 b .5 }
}
</textarea>




</body>
</html>
